home *** CD-ROM | disk | FTP | other *** search
/ Practical Internet Web Designer 89 / PIWD89.iso / pc / CONTENTS / BONUS / FULL / wikiwriter / setup-ww2x.exe / {app} / help / tutor09.db < prev    next >
Text File  |  2002-09-25  |  2KB  |  92 lines
  1. @@title WikiWriter Tutorial: Layout page elements with DIV
  2. .nav WikiWriter Tutorial: ((tutor08|Prev)) | ((tutor00|Up)) | ((tutor10|Next))
  3. .end
  4. == Layout page elements with DIV
  5.  
  6. For blocks of text (and/or graphics, lists, other blocks, etc.) use DIV elements named in the CSS file. Open the DIV with a dot and the class name, and close it with a dot and "end".
  7. <pre>
  8. .result This is a "result" div.
  9. .end
  10. </pre>
  11. .result This is a result div.
  12. .end
  13. The appearance and behavior of divs is specified in the CSS file. If you nest divs, you have to close with a dot-end for each div in the set:
  14. <pre>
  15. .plan This is a "plan" div...
  16. .result ... holding a "result" div.
  17. .end
  18. .end
  19. </pre>
  20. .plan This is a "plan" div...
  21. .result ... holding a "result" div.
  22. .end
  23. .end
  24.  
  25. Try it on [[b Second Page]], which isn't nearly fancy enough for today's Web standards.
  26.  
  27. To put the entire link list into a "result" div, put a dot and "result" on a line just before the list, and a dot and "end" on the line just after the list:
  28. <pre>
  29. == My second page.
  30. .result
  31. # Link back to ((Home)). - [[b a good place to start]]
  32. # This link goes to the ((Third Page|next)) page. - [[rev still needs some work]]
  33. /#
  34. .end
  35. </pre>
  36.  
  37. Now we have:
  38. .result
  39. == My second page.
  40. .result
  41. # Link back to ((Home)). - [[b a good place to start]]
  42. # This link goes to the ((Third Page|next)) page. - [[rev still needs some work]]
  43. /#
  44. .end
  45. .end
  46.  
  47. Not bad, but it still needs something... Let's center the heading:
  48. <pre>
  49. .cent
  50. == My second page.
  51. .end
  52. </pre>
  53.  
  54. .result
  55. .cent
  56. == My second page.
  57. .end
  58. .result
  59. # Link back to ((Home)). - [[b a good place to start]]
  60. # This link goes to the ((Third Page|next)) page. - [[rev still needs some work]]
  61. /#
  62. .end
  63. .end
  64.  
  65. We're getting there. One last touch - put the centered heading in a "plan" DIV (notice each DIV needs it's own ".end"):
  66. <pre>
  67. .plan
  68. .cent
  69. == My second page.
  70. .end
  71. .end
  72. </pre>
  73.  
  74. Lovely -- a little garish, but lovely:
  75. .result
  76. .plan
  77. .cent
  78. == My second page.
  79. .end
  80. .end
  81. .result
  82. # Link back to ((Home)). - [[b a good place to start]]
  83. # This link goes to the ((Third Page|next)) page. - [[rev still needs some work]]
  84. /#
  85. .end
  86. .end
  87. .nav WikiWriter Tutorial: ((tutor08|Prev)) | ((tutor00|Up)) | ((tutor10|Next))
  88. .end
  89.  
  90.  
  91.  
  92.